import QtQuick 1.0
import "G.js" as G
import "Storage.js" as Storage

Item {
    id: idLoginSignup

    signal loginSuccess
    signal loginError(string message)
    signal loggingIn
    signal signingIn
    signal signupError

    Behavior on anchors.topMargin { NumberAnimation { duration:  400 } }

    Text {
        id: idTextUserName
        anchors.top: idLoginSignup.top
        anchors.topMargin: 22
        anchors.left: idLoginSignup.left
        anchors.leftMargin: 10
        width: idLoginSignup.width / 4
        height:  50
        text: "Username"
        color: "white"
        font { bold: true; family: "Helvetica"; pixelSize:18 }
        horizontalAlignment: "AlignRight"
    }


    Image {
        id: idBackgroundUsername
        anchors.top: idLoginSignup.top
        anchors.topMargin: 10
        anchors.left: idTextUserName.right
        anchors.leftMargin: 10
        anchors.right: idLoginSignup.right
        anchors.rightMargin: 40
        source:"art/text-background.png"
        Behavior on opacity { NumberAnimation { duration: 100  } }
    }

    TextInput {
        id: idTextInputUserName
        anchors.top: idLoginSignup.top
        anchors.topMargin: 22
        anchors.left: idTextUserName.right
        anchors.leftMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 50
        height:  50
        text: ""
        font { bold: true; family: "Helvetica"; pixelSize:18 }
        color: "black"
    }

    Text {
        id: idTextPassword
        anchors.top: idTextUserName.bottom
        anchors.topMargin: 12
        anchors.left: idLoginSignup.left
        anchors.leftMargin: 10
        width: idLoginSignup.width / 4
        height:  50
        text: "Password"
        color: "white"
        font { bold: true; family: "Helvetica"; pixelSize:18 }
        horizontalAlignment: "AlignRight"

    }

    Image {
        id: idBackgroundPassword
        anchors.top: idTextInputUserName.bottom
        anchors.left: idTextPassword.right
        anchors.leftMargin: 10
        anchors.right: idLoginSignup.right
        anchors.rightMargin: 40
        source:"art/text-background.png"
        Behavior on opacity { NumberAnimation { duration: 100  } }
    }


    TextInput {
        id: idTextInputPassword
        anchors.top: idTextInputUserName.bottom
        anchors.topMargin: 12
        anchors.left: idTextPassword.right
        anchors.leftMargin: 20
        anchors.right: idLoginSignup.right
        anchors.rightMargin: 50
        height:  50
        text: ""
        font { bold: true; family: "Helvetica"; pixelSize: 18 }
        color: "black"
        echoMode: TextInput.Password
    }

    Button { id: idLoginButton
        source: "art/buttonLogin.png"
        anchors.top: idTextInputPassword.bottom
        anchors.topMargin: 15
        anchors.right: idLoginSignup.right
        anchors.rightMargin: 10
        onPressed: {
            idLoginSignup.state = "LoggingIn"
            idLoginSignup.loggingIn();
            loginWorker.sendMessage({'username': idTextInputUserName.text, 'password': idTextInputPassword.text, 'g': G.g});
        }
    }

    Button { id: idSignupButton
        source: "art/buttonSignup.png"
        anchors.left: idLoginSignup.left
        anchors.leftMargin: 10
        anchors.verticalCenter: idLoginButton.verticalCenter
        onPressed: {
            idLoginSignup.state = "SigningIn"
            idLoginSignup.signingIn();
            signupWorker.sendMessage({'username': idTextInputUserName.text, 'password': idTextInputPassword.text, 'g': G.g});
        }
    }

    states: [
        State {
            name: "LoggedIn"
            PropertyChanges { target:idLoginButton; state: 'Hidden'; }
            PropertyChanges { target:idSignupButton; state: 'Hidden'; }
            PropertyChanges { target:idBackgroundUsername; opacity: 0; }
            PropertyChanges { target:idBackgroundPassword; opacity: 0; }
            PropertyChanges { target:idTextInputPassword; readOnly: true; opacity: 0; }
            PropertyChanges { target:idTextInputUserName; readOnly: true; opacity: 0; }
            PropertyChanges { target:idTextUserName; opacity: 0; }
            PropertyChanges { target:idTextPassword; opacity: 0; }
            PropertyChanges { target:idLoginSignup; anchors.topMargin: -500 }
        },
        State {
            name: "LoggingIn"
            PropertyChanges { target:idLoginButton; state: 'Hidden'; }
            PropertyChanges { target:idSignupButton; state: 'Hidden'; }
            PropertyChanges { target:idBackgroundUsername; opacity: 0; }
            PropertyChanges { target:idBackgroundPassword; opacity: 0; }
            PropertyChanges { target:idTextInputPassword; opacity: 0; }
            PropertyChanges { target:idTextInputUserName; opacity: 0; }
            PropertyChanges { target:idTextUserName; opacity: 0; }
            PropertyChanges { target:idTextPassword; opacity: 0; }

        },
        State {
            name: "SigningIn"
            PropertyChanges { target:idLoginButton; state: 'Hidden'; }
            PropertyChanges { target:idSignupButton; state: 'Hidden'; }
            PropertyChanges { target:idBackgroundUsername; opacity: 0; }
            PropertyChanges { target:idBackgroundPassword; opacity: 0; }
            PropertyChanges { target:idTextInputPassword; opacity: 0; }
            PropertyChanges { target:idTextInputUserName; opacity: 0; }
            PropertyChanges { target:idTextUserName; opacity: 0; }
            PropertyChanges { target:idTextPassword; opacity: 0; }
        },
        State {
            name: "LoggedOut"
            PropertyChanges { target:idBackgroundUsername; opacity: 1; }
            PropertyChanges { target:idBackgroundPassword; opacity: 1; }
            PropertyChanges { target:idTextInputPassword; readOnly: false; opacity: 1; }
            PropertyChanges { target:idTextInputUserName; readOnly: false; opacity: 1; }
            PropertyChanges { target:idTextInputPassword; color: "black" }
            PropertyChanges { target:idTextInputUserName; color: "black" }
            PropertyChanges { target:idLoginButton; state: "" }
            PropertyChanges { target:idSignupButton; state: "" }
            PropertyChanges { target:idLoginSignup; anchors.topMargin: 15 }
        },
        State {
            name: "HiddenUp"
            PropertyChanges { target:idLoginButton; opacity: 1; }
            PropertyChanges { target:idSignupButton; opacity: 1; }
            PropertyChanges { target:idBackgroundUsername; opacity: 1; }
            PropertyChanges { target:idBackgroundPassword; opacity: 1; }
            PropertyChanges { target:idTextInputPassword; readOnly: false; opacity: 1; }
            PropertyChanges { target:idTextInputUserName; readOnly: false; opacity: 1; }
            PropertyChanges { target:idTextInputPassword; color: "black" }
            PropertyChanges { target:idTextInputUserName; color: "black" }
            PropertyChanges { target:idTextInputPassword; text: ""; }
            PropertyChanges { target:idLoginSignup; anchors.topMargin: -500 }
        }
    ]

    WorkerScript {
             id: loginWorker
             source: "FetcherLogin.js"
             onMessage: {
                 if (messageObject.result == "SUCCESS") {
                     G.g.token = messageObject.token
                     Storage.setSetting("whatserToken", messageObject.token);
                     idLoginSignup.loginSuccess();
                 } else {
                     //idLoginSignup.loginError(messageObject.message);
                     idLoginSignup.loginError("Invalid username / password");
                 }
             }
         }

    WorkerScript {
             id: signupWorker
             source: "FetcherSignup.js"
             onMessage: {
                 if (messageObject.result == "SUCCESS") {
                     idLoginSignup.state = "LoggingIn"
                     idLoginSignup.loggingIn();
                     loginWorker.sendMessage({'username': idTextInputUserName.text, 'password': idTextInputPassword.text, 'g': G.g});
                 } else {
                     idLoginSignup.signupError();
//                     idLoginSignup.state = "LoggedOut"
//                     idMessageBox.text  = "Error signing up, please try again"
//                     idMessageBox.opacity = 1
                 }
             }
         }


}
